<template>
  <div class="hello">
    <div class="border-bottom">
      <sjx_Header 
        :logo="logo" 
        :logom="logoM"/>
    </div>
    <div class="home_banner flex">
      <div class="text flex flex-col flex-justify-center flex-align-center">
        <h2>{{ $t('index.title') }}</h2>
        <p>{{ $t('index.desc') }}</p>
      </div>
      <div 
        class="download flex flex-justify-around ">
        <a 
          class="flex flex-child-shrink"
          href="https://play.google.com/store/apps/details?id=com.hongcheng.vaydong" >
          <img 
            class="flex-child-shrink formForPC"
            src="../static/img/google_play.png" 
            alt="">
          <img 
            class="flex-child-shrink formForM"
            src="../static/img/google_play.png" 
            alt=""
            height="50">
        </a>
        <router-link 
          to="/repay"
          class="flex flex-child-shrink" >
          <img 
            class="flex-child-shrink formForPC"
            src="../static/img/query.png" 
            alt="">
          <img 
            class="flex-child-shrink formForM"
            src="../static/img/query.png" 
            alt=""
            height="50">
        </router-link>
      </div>
    </div>
    <div class="body">
      <div class="todo1">
        <div class="todo1-main">
          <h2>Loại hình cho vay</h2>
          <ul>
            <li 
              v-for="(item, i) in loanTypeArr" 
              :key="i">
              <nuxt-link 
                :to="'/home?type='+item.type">
                <img :src="require('../static/img/loanType_'+item.type+'.png')">
                <div>
                  <p class="name">{{ item.title }}</p>
                  <span class="desc">{{ item.desc }}</span>
                </div>
              </nuxt-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="todo2">
        <div class="todo2-main">
          <div class="list-wrap">
            <div class="left">
              <h2>{{ $t('index.latestProgress') }}</h2>
              <div class="title">
                <span>{{ $t('index.phone') }}</span>
                <span>{{ $t('index.provice') }}</span>
                <span>{{ $t('index.loanType') }}</span>
                <span>{{ $t('index.loanAmount') }}</span>
                <span>{{ $t('index.applyTime') }}</span>
              </div>
              <div style="overflow:hidden">
                <ul 
                  ref="con1" 
                  :class="{anim:animate==true}">
                  <li  
                    v-for="(item, i) in fakeData"
                    ref="content" 
                    :key="i"
                    class="content">
                    <span class="font-12">{{ item.phone }}</span>
                    <span class="font-12">{{ item.provice }}</span>
                    <span><span class="red font-16 bold">{{ item.loanAmount }}</span><span class="red font-12">vnd</span></span>
                    <span class="font-12">{{ item.loanType }}</span>
                    <span class="font-12">{{ item.applyTime }}</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="right">
              <h2>{{ $t('index.applyProcess') }}</h2>
              <div>
                <img 
                  src="../static/img/applyProcess.png" 
                  alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="todo3">
        <div class="todo3-main">
          <div class="text-wrap"><p>Khách hàng của chúng tôi</p></div>
        </div>
      </div>
      <div class="todo4">
        <div class="todo4-main">
          <div class="todo1-1">
            <div class="bg"/>
            <div class="total">{{ $t('home.ourCustomers') }}</div>
          </div>
          <div class="todo1-3">
            <div class="todo1-3-main formForPC">
              <ul>
                <li>
                  <div class="todo4-1 pic">
                    <div class="tx">
                      <img 
                        src="../static/img/tx4.png" 
                        alt="">
                    </div>
                    <div class="desc2">
                      <p class="todo4-1-1">{{ $t('home.firstCustomersName') }}</p>
                      <p class="todo4-1-2">{{ $t('home.firstCustomersAge') }}</p>
                      <p class="todo4-1-3">{{ $t('home.firstCustomersPosition') }}</p>
                    </div>
                  </div>
                  <div class="todo4-2">
                    <p>{{ $t('home.firstCustomersCommit') }}</p>
                  </div>
                </li>
                <li>
                  <div class="todo4-1 pic">
                    <div class="tx">
                      <img 
                        src="../static/img/tx2.png" 
                        alt="">
                    </div>
                    <div class="desc2">
                      <p class="todo4-1-1">{{ $t('home.secondCustomersName') }}</p>
                      <p class="todo4-1-2">{{ $t('home.secondCustomersAge') }}</p>
                      <p class="todo4-1-3">{{ $t('home.secondCustomersPosition') }}</p>
                    </div>
                  </div>
                  <div class="todo4-2">
                    <p>{{ $t('home.secondCustomersCommit') }}</p>
                  </div>
                </li>
                <li>
                  <div class="todo4-1 pic">
                    <div class="tx">
                      <img 
                        src="../static/img/tx3.png" 
                        alt="">
                    </div>
                    <div class="desc2">
                      <p class="todo4-1-1">{{ $t('home.thirdCustomersName') }}</p>
                      <p class="todo4-1-2">{{ $t('home.thirdCustomersAge') }}</p>
                      <p class="todo4-1-3">{{ $t('home.thirdCustomersPosition') }}</p>
                    </div>
                  </div>
                  <div class="todo4-2">
                    <p>{{ $t('home.thirdCustomersCommit') }}</p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="todo1-3-main formForM carousel-wrap">
              <transition-group 
                :duration="{ enter: 800, leave: 800 }" 
                tag="ul" 
                class="slide-ul" 
                name="list">
                <li 
                  v-show="currentIndex===1" 
                  :key="1" 
                  @touchstart="touchStart" 
                  @touchmove="touchMove" 
                  @touchend="touchEnd">
                  <div class="todo4-1 pic">
                    <div class="tx">
                      <img 
                        src="../static/img/tx4.png" 
                        alt="">
                    </div>
                    <div class="desc2">
                      <p class="todo4-1-1">{{ $t('home.firstCustomersName') }}</p>
                      <p class="todo4-1-2">{{ $t('home.firstCustomersAge') }}</p>
                      <p class="todo4-1-3">{{ $t('home.firstCustomersPosition') }}</p>
                    </div>
                  </div>
                  <div class="todo4-2">
                    <p>{{ $t('home.firstCustomersCommit') }}</p>
                  </div>
                </li>
                <li 
                  v-show="currentIndex==2" 
                  :key="2" 
                  @touchstart="touchStart" 
                  @touchmove="touchMove" 
                  @touchend="touchEnd">
                  <div class="todo4-1 pic">
                    <div class="tx">
                      <img 
                        src="../static/img/tx2.png" 
                        alt="">
                    </div>
                    <div class="desc2">
                      <p class="todo4-1-1">{{ $t('home.secondCustomersName') }}</p>
                      <p class="todo4-1-2">{{ $t('home.secondCustomersAge') }}</p>
                      <p class="todo4-1-3">{{ $t('home.secondCustomersPosition') }}</p>
                    </div>
                  </div>
                  <div class="todo4-2">
                    <p>{{ $t('home.secondCustomersCommit') }}</p>
                  </div>
                </li>
                <li 
                  v-show="currentIndex===3" 
                  :key="3" 
                  @touchstart="touchStart" 
                  @touchmove="touchMove" 
                  @touchend="touchEnd">
                  <div class="todo4-1 pic">
                    <div class="tx">
                      <img 
                        src="../static/img/tx3.png" 
                        alt="">
                    </div>
                    <div class="desc2">
                      <p class="todo4-1-1">{{ $t('home.thirdCustomersName') }}</p>
                      <p class="todo4-1-2">{{ $t('home.thirdCustomersAge') }}</p>
                      <p class="todo4-1-3">{{ $t('home.thirdCustomersPosition') }}</p>
                    </div>
                  </div>
                  <div class="todo4-2">
                    <p>{{ $t('home.thirdCustomersCommit') }}</p>
                  </div>
                </li>
              </transition-group>
              <div 
                v-if="leftEnable" 
                class="dot left" 
                @click="prev">
                <img 
                  src="../static/img/left-arrow.png" 
                  alt="" 
                  width="12px">
                  <!-- <span></span>
                <span></span> -->
              </div>
              <div 
                v-if="rightEnable" 
                class="dot right" 
                @click="next">
                <img 
                  src="../static/img/right-arrow.png" 
                  alt="" 
                  width="12px">
                  <!-- <span></span>
                <span></span> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template>
      <sjx_Footer/>
    </template>
  </div>
</template>
<script>
// if (process.BROWSER_BUILD) {
//   require('external_library')
// }
import sjx_Header from '../components/header'
import sjx_Footer from '../components/footer'
import route from '../components/route'
import base from '../common/fn.js'
export default {
  name: 'Index',
  components: {
    sjx_Header,
    sjx_Footer,
    route
  },
  data() {
    return {
      currentIndex: 2, // transition组件当前显示的元素
      leftEnable: true,
      rightEnable: true,
      loanTypeArr: [
        {
          type: '2',
          title: this.$t('home.student'),
          desc: this.$t('home.studentDesc')
        },
        {
          type: '6',
          title: this.$t('home.motobike'),
          desc: this.$t('home.motobikeDesc')
        },
        {
          type: '3',
          title: this.$t('home.house'),
          desc: this.$t('home.houseDesc')
        },
        {
          type: '5',
          title: this.$t('home.love'),
          desc: this.$t('home.loveDesc')
        }
        // {
        //   type: '4',
        //   title: this.$t('home.visa'),
        //   desc: this.$t('home.visaDesc')
        // }
      ],
      fakeData: [
        {
          phone: '927****6996',
          provice: 'Bạc Liêu',
          loanAmount: '2.000.000',
          loanType: 'Love Vay',
          applyTime: '2018-11-24 3:25:34'
        },
        {
          phone: '092****2039',
          provice: 'Hồ Chí MinH',
          loanAmount: '3.000.000',
          loanType: 'Vay xe máy',
          applyTime: '2018-11-23 23:20:21'
        },
        {
          phone: '092****6909',
          provice: 'Đồng Nai',
          loanAmount: '3.000.000',
          loanType: 'Vay xe máy',
          applyTime: '2018-11-23 19:30:48'
        },
        {
          phone: '090****8292',
          provice: 'Yên Bái',
          loanAmount: '2.500.000',
          loanType: 'vay tiền thuê nhà',
          applyTime: '2018-11-24 0:14:36'
        },
        {
          phone: '090****9612',
          provice: 'Hồ Chí MinH',
          loanAmount: '3.000.000',
          loanType: 'Love Vay',
          applyTime: '2018-11-23 21:40:34'
        },
        {
          phone: '090****1214',
          provice: 'Kiên Giang',
          loanAmount: '2.500.000',
          loanType: 'vay tiền thuê nhà',
          applyTime: '2018-11-24 5:31:28'
        },
        {
          phone: '093****0751',
          provice: 'Hồ Chí MinH',
          loanAmount: '1.500.000',
          loanType: 'Vay sinh viên',
          applyTime: '2018-11-23 4:31:36'
        },
        {
          phone: '092****8210',
          provice: 'Gia Lai',
          loanAmount: '5.000.000',
          loanType: 'Vay xe máy',
          applyTime: '2018-11-23 10:15:26'
        },
        {
          phone: '091****6890',
          provice: 'Lâm Đồng',
          loanAmount: '3.500.000',
          loanType: 'vay tiền thuê nhà',
          applyTime: '2018-11-23 17:55:21'
        },
        {
          phone: '099****2603',
          provice: 'Hồ Chí MinH',
          loanAmount: '3.500.000',
          loanType: 'vay tiền thuê nhà',
          applyTime: '2018-11-23 6:21:6'
        }
      ],
      animate: false,
      logo: '',
      logoM: ''
    }
  },
  mounted() {
    const fullCurrentDomain = location.origin
    console.log(fullCurrentDomain)
    if (fullCurrentDomain.indexOf('mydong') > 0) {
      this.logo = require('static/img/myDong.png')
      this.logoM = require('static/img/logo-m.png')
    } else {
      this.logo = require('static/img/logo.png')
      this.logoM = require('static/img/logo.png')
    }
    let Timer
    if (this.$route.path === '/') {
      setInterval(this.scroll, 1000)
    } else {
      clearInterval()
    }
  },
  methods: {
    scroll() {
      if (this.$refs.con1 && this.$refs.content[0]) {
        let con1 = this.$refs.con1
        let height = this.$refs.content[0].offsetHeight
        con1.style.marginTop = '-' + height + 'px'
        this.animate = !this.animate
        var that = this // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
        setTimeout(function() {
          that.fakeData.push(that.fakeData[0])
          that.fakeData.shift()
          con1.style.marginTop = '0px'
          that.animate = !that.animate // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        }, 1000)
      } else {
        clearInterval()
      }
    },

    touchStart(e) {
      e.preventDefault()
      this.startX = e.touches[0].pageX
    },
    touchMove(e) {
      e.preventDefault()
      this.moveEndX = e.changedTouches[0].pageX
    },
    touchEnd(e) {
      e.preventDefault()
      let X = this.moveEndX - this.startX
      // 捕获鼠标移动事件根据初始和结束状态下鼠标的水平位置的差值判断左移还是右移
      if (X > 0) {
        this.prev()
        // 右移的话元素移动到前一位
      } else if (X < 0) {
        this.next()
        // 左移的话元素移动到后一位
      }
    },
    prev() {
      if (this.currentIndex === 1) {
        this.currentIndex = 1
        this.leftEnable = false
        this.rightEnable = true
      } else {
        this.currentIndex--

        this.leftEnable = true
        this.rightEnable = true
      }
    },
    next() {
      if (this.currentIndex === 3) {
        this.currentIndex = 3
        this.leftEnable = true
        this.rightEnable = false
      } else {
        this.currentIndex++
        this.leftEnable = true
        this.rightEnable = true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@mixin flex($cen) {
  display: flex;
  justify-content: $cen;
  align-items: center;
}

@media screen and (min-width: 1200px) {
  .home_banner {
    width: 100%;
    height: 70vh;
    background-size: 100% 100%;
    background-image: url('../static/img/home_bg1.png');
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    h2 {
      font-size: 48px;
      color: #fff;
      font-weight: 700;
      max-width: 100vh;
      line-height: 65px;
      text-align: center;
      margin-bottom: 45px;
    }
    p {
      font-size: 30px;
      color: #fff;
      font-weight: 500;
    }
    .text {
      flex: 0 0 60%;
    }
    .download {
      // flex: 0 0 40%;
      width: 800px;
      margin-top: 20px;
    }
  }
  .todo1 {
    .todo1-main {
      padding: 20px;
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      text-align: center;
      h2 {
        font-size: 26px;
        font-weight: 700;
        max-width: 80vh;
        line-height: 65px;
        margin: 0 auto;
        margin-bottom: 45px;
      }
      ul {
        margin-bottom: 120px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
          padding: 20px;
          flex: 1;
          img {
            width: 150px;
          }
          div {
            padding: 20px 0;
            p {
              font-size: 15px;
              font-weight: 700;
              line-height: 50px;
            }
          }
        }
      }
    }
  }
  .todo2 {
    width: 100%;
    height: 520px;
    background-size: 100% 100%;
    background-image: url('../static/img/home_bg2.png');
    position: relative;
    .todo2-main {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      .list-wrap {
        width: 1200px;
        height: 520px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 4px 25px 7px rgba(121, 121, 121, 0.16);
        border-radius: 34px;
        position: absolute;
        top: -80px;
        display: flex;
        justify-content: space-between;
        padding: 30px;
        .left {
          flex: 1.8;
          padding: 20px;
          border-right: 1px dashed #aaa;
          overflow: hidden;
          h2 {
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            line-height: 50px;
          }
          div.title {
            display: flex;
            border-bottom: 1px solid #ccc;
            span {
              flex: 1;
              line-height: 50px;
              text-align: center;
            }
          }
          ul {
            li {
              display: flex;
              justify-content: space-between;
              span {
                flex: 1;
                line-height: 50px;
                text-align: center;
              }
            }
          }
        }
        .right {
          flex: 1;
          text-align: center;
          h2 {
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            line-height: 50px;
          }
          div {
            width: 100%;
            padding: 20px 10px;
            margin-left: 10px;
            img {
              width: 60%;
            }
          }
        }
      }
    }
  }
  .todo3 {
    width: 100%;
    height: 48vh;
    background-size: 100% 100%;
    background-image: url('../static/img/home_bg3.png');
    position: relative;
    .todo3-main {
      width: 100%;
      height: 48vh;
      display: flex;
      justify-content: center;
      align-items: center;
      div {
        width: 780px;
        height: 300px;
        background: #258dfe;
        opacity: 0.92;
        display: flex;
        justify-content: center;
        align-items: center;
        p {
          font-size: 36px;
          color: #fff;
          font-weight: bold;
        }
      }
    }
  }
  .todo4 {
    width: 100%;
    height: 680px;
    background: rgba(239, 243, 255, 1);
    padding-top: 90px;
    .todo4-main {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      .todo1-1 {
        width: 100%;
        height: 118px;
        margin-bottom: 54px;
        position: relative;
        display: none;
        .bg {
          width: 120px;
          margin: 0 auto;
          height: 100%;
          background-image: url('../static/img/bg3.png');
        }
        .total {
          width: 600px;
          text-align: center;
          height: 29px;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          font-size: 30px;
          color: rgba(51, 51, 51, 1);
        }
      }
      .todo1-3 {
        width: 100%;
        @include flex(center);
        .todo1-3-main {
          width: 1200px;
          height: 100%;
          ul {
            @include flex(space-between);
            li {
              width: 370px;
              height: 458px;
              background-image: url('../static/img/bg6.png');
              padding: 36px 30px;
              box-shadow: 0px 6px 32px 0px rgba(48, 77, 220, 0.09);
              .todo4-1 {
                width: 100%;
                height: auto;
                display: flex;
                .tx {
                  width: 100px;
                  height: 100px;
                }
                .desc2 {
                  flex: auto;
                  padding-left: 20px;
                  .todo4-1-1 {
                    padding-top: 12px;
                    font-weight: bold;
                    font-size: 24px;
                    color: #383838;
                  }
                  .todo4-1-2 {
                    font-size: 18px;
                    margin: 10px 0;
                    color: #383838;
                  }
                  .todo4-1-3 {
                    font-size: 18px;
                    color: #3462ff;
                  }
                }
              }
              .todo4-2 {
                padding-top: 30px;
                font-size: 16px;
                color: rgba(93, 93, 93, 1);
                line-height: 24px;
                text-align: justify;
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .home_banner {
    width: 100%;
    height: 29vh;
    background-size: 100% auto;
    background-image: url('../static/img/home_bg1.png');
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    h2 {
      font-size: 32px;
      color: #fff;
      font-weight: 700;
      line-height: 45px;
      text-align: center;
      margin-bottom: 25px;
    }
    p {
      font-size: 20px;
      color: #fff;
      font-weight: 500;
    }
    .text {
      flex: 0 0 60%;
    }
    .download {
      // flex: 0 0 40%;
      width: 800px;
      margin-top: 20px;
    }
  }
  .todo1 {
    .todo1-main {
      padding: 20px;
      max-width: 100%;
      margin: 0 auto;
      text-align: center;
      h2 {
        font-size: 26px;
        font-weight: 700;
        max-width: 80vh;
        line-height: 65px;
        margin: 0 auto;
        margin-bottom: 45px;
      }
      ul {
        margin-bottom: 100px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
          flex: 1;
          img {
            width: 100px;
          }
          div {
            padding: 20px 0;
            p {
              font-size: 15px;
              font-weight: 700;
              margin-bottom: 22px;
            }
          }
        }
      }
    }
  }
  .todo2 {
    width: 100%;
    height: 520px;
    background-size: 100% 100%;
    background-image: url('../static/img/home_bg2.png');
    position: relative;
    .todo2-main {
      width: 90vw;
      height: 100%;
      margin: 0 auto;
      .list-wrap {
        width: 90%;
        height: 520px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 4px 25px 7px rgba(121, 121, 121, 0.16);
        border-radius: 34px;
        position: absolute;
        top: -80px;
        display: flex;
        justify-content: space-between;
        padding: 30px;
        .left {
          flex: 1.8;
          padding: 20px;
          border-right: 1px dashed #aaa;
          overflow: hidden;
          h2 {
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            line-height: 50px;
          }
          div.title {
            display: flex;
            border-bottom: 1px solid #ccc;
            span {
              flex: 1;
              line-height: 50px;
              text-align: center;
            }
            span:nth-child(2) {
              display: none;
            }
            span:last-child {
              display: none;
            }
          }
          ul {
            li {
              display: flex;
              justify-content: space-between;
              span {
                flex: 1;
                padding: 18px;
                text-align: center;
              }
            }
            span:nth-child(2) {
              display: none;
            }
            span:last-child {
              display: none;
            }
          }
        }
        .right {
          flex: 1;
          text-align: center;
          display: flex;
          flex-direction: column;
          h2 {
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            line-height: 50px;
          }
          div {
            width: 100%;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              margin-left: 10px;
              width: 80%;
            }
          }
        }
      }
    }
  }
  .todo3 {
    width: 100%;
    height: 30vh;
    background-size: 100% 100%;
    background-image: url('../static/img/home_bg3.png');
    position: relative;
    .todo3-main {
      width: 100%;
      height: 30vh;
      display: flex;
      justify-content: center;
      align-items: center;
      div {
        width: 58vw;
        height: 180px;
        background: #258dfe;
        opacity: 0.92;
        display: flex;
        justify-content: center;
        align-items: center;
        p {
          font-size: 36px;
          color: #fff;
          font-weight: bold;
        }
      }
    }
  }
  .todo4 {
    width: 100%;
    height: 680px;
    background: rgba(239, 243, 255, 1);
    padding-top: 98px;
    .todo4-main {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      .todo1-1 {
        display: none;
        width: 100%;
        height: 118px;
        margin-bottom: 54px;
        position: relative;
        .bg {
          width: 120px;
          margin: 0 auto;
          height: 100%;
          background-image: url('../static/img/bg3.png');
        }
        .total {
          width: 600px;
          text-align: center;
          height: 29px;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          font-size: 30px;
          color: rgba(51, 51, 51, 1);
        }
      }
      .todo1-3 {
        width: 100%;
        @include flex(center);
        .todo1-3-main.formForM {
          display: none !important;
        }
        .todo1-3-main.formForPC {
          width: 100%;
          height: 100%;
          display: block;
          ul {
            @include flex(space-between);
            li {
              width: 33%;
              height: 458px;
              background-image: url('../static/img/bg6.png');
              box-shadow: 0px 6px 32px 0px rgba(48, 77, 220, 0.09);
              padding: 36px 10px;
              .todo4-1 {
                width: 100%;
                height: auto;
                display: flex;
                .tx {
                  width: 80px;
                  height: 80px;
                }
                .desc2 {
                  flex: auto;
                  padding-left: 20px;
                  .todo4-1-1 {
                    padding-top: 12px;
                    font-weight: bold;
                    font-size: 24px;
                    color: #383838;
                  }
                  .todo4-1-2 {
                    font-size: 18px;
                    margin: 10px 0;
                    color: #383838;
                  }
                  .todo4-1-3 {
                    font-size: 18px;
                    color: #3462ff;
                  }
                }
              }
              .todo4-2 {
                padding-top: 30px;
                font-size: 16px;
                color: rgba(93, 93, 93, 1);
                line-height: 24px;
                text-align: justify;
              }
            }
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 767px) {
  .home_banner {
    width: 100%;
    height: 58vh;
    background-size: auto 100%;
    background-image: url('../static/img/home_bg1.png');
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    h2 {
      font-size: 28px;
      color: #fff;
      font-weight: 700;
      max-width: 80vh;
      line-height: 45px;
      text-align: center;
      margin-bottom: 25px;
    }
    p {
      font-size: 16px;
      color: #fff;
      font-weight: 500;
      text-align: center;
    }
  }
  .text {
    flex: 0 0 60%;
  }
  .download {
    // flex: 0 0 40%;
    width: 100%;
    // margin-top: 20px;
  }
  .todo1 {
    .todo1-main {
      padding: 20px;
      max-width: 100%;
      margin: 0 auto;
      text-align: center;
      h2 {
        font-size: 26px;
        font-weight: 700;
        max-width: 80vh;
        line-height: 65px;
        margin: 0 auto;
        margin-bottom: 45px;
      }
      ul {
        margin-bottom: 50px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
          flex: 0 0 50%;
          img {
            width: 100px;
          }
          div {
            padding: 20px 0;
            p {
              font-size: 12px;
              font-weight: 700;
              margin-bottom: 10px;
            }
            span {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  .todo2 {
    width: 100%;
    height: 350px;
    background-size: 100% 100%;
    background-image: url('../static/img/home_bg2.png');
    position: relative;
    .todo2-main {
      width: 80%;
      height: 100%;
      margin: 0 auto;
      .list-wrap {
        width: 80%;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 4px 25px 7px rgba(121, 121, 121, 0.16);
        border-radius: 10px;
        position: absolute;
        top: -50px;
        overflow: hidden;
        .left {
          padding: 10px;
          overflow: hidden;
          h2 {
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            height: 32px;
          }
          div.title {
            display: flex;
            border-bottom: 1px solid #ccc;
            padding: 10px 0px;
            span {
              flex: 1;
              height: 38px;
              text-align: center;
            }
            span:nth-child(2) {
              display: none;
            }
            span:last-child {
              display: none;
            }
          }
          ul {
            li {
              display: flex;
              justify-content: space-between;
              align-items: center;
              span {
                flex: 1;
                padding: 10px;
                text-align: center;
              }
              span:nth-child(2) {
                display: none;
              }
              span:last-child {
                display: none;
              }
            }
          }
        }
        .right {
          display: none;
        }
      }
    }
  }
  .todo3 {
    width: 100%;
    height: 250px;
    background-size: cover;
    background-image: url('../static/img/home_bg3.png');
    position: relative;
    .todo3-main {
      width: 100%;
      height: 250px;
      display: flex;
      justify-content: center;
      align-items: center;
      div {
        width: 65vw;
        height: 120px;
        padding: 10px;
        background: #258dfe;
        opacity: 0.92;
        display: flex;
        justify-content: center;
        align-items: center;
        p {
          font-size: 18px;
          color: #fff;
          font-weight: bold;
        }
      }
    }
  }
  .todo4 {
    width: 100%;
    background: rgba(239, 243, 255, 1);
    padding-top: 38px;
    position: relative;
    .todo4-main {
      width: 100%;
      height: 100%;
      margin: 0 auto;

      .todo1-1 {
        width: 100%;
        height: 80px;
        position: relative;
        display: none;
        .bg {
          width: 80px;
          margin: 0 auto;
          height: 100%;
          background-image: url('../static/img/bg3.png');
          background-size: cover;
        }
        .total {
          width: 300px;
          text-align: center;
          height: 45px;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          font-size: 22px;
          color: rgba(51, 51, 51, 1);
          font-weight: 700;
        }
      }
      .todo1-3 {
        width: 100%;
        @include flex(center);
        .todo1-3-main {
          width: 100%;
          height: 100%;
          ul {
            @include flex(space-between);
            li {
              width: 68%;
              background: #fff;
              border-radius: 5px;
              height: 300px;
              overflow: hidden;
              // background-image: url('../static/img/bg6.png');
              padding: 20px;
              margin: 20px auto 40px;
              box-shadow: 0px 6px 32px 0px rgba(48, 77, 220, 0.09);
              .todo4-1 {
                height: auto;
                text-align: center;
                .tx {
                  height: 60px;
                  img {
                    height: 60px;
                  }
                }
                .desc2 {
                  flex: auto;
                  .todo4-1-1 {
                    padding-top: 12px;
                    font-weight: bold;
                    font-size: 14px;
                    color: #383838;
                  }
                  .todo4-1-2 {
                    font-size: 12px;
                    margin: 5px 0;
                    color: #383838;
                  }
                  .todo4-1-3 {
                    font-size: 14px;
                    color: #3462ff;
                    font-weight: 700;
                  }
                }
              }
              .todo4-2 {
                padding-top: 20px;
                font-size: 12px;
                color: rgba(93, 93, 93, 1);
                line-height: 20px;
                text-align: justify;
              }
            }
          }
          .dot {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #fff;
            top: 50%;
            margin-top: -20px;
            box-shadow: 0px 3px 13px 0px rgba(184, 184, 184, 0.34);
            img {
              position: relative;
              top: 10px;
            }
            // span{
            //   width: 20px;
            //   height:2px;
            //   background: #aaa;
            //   display: inline-block;
            // }
          }
          .dot.left {
            left: 10px;
            img {
              left: 12px;
            }
            // span:nth-child(1){
            //   -webkit-transform: rotate(-45deg) translate(-1px, 1px);
            //   transform: rotate(-45deg) translate(-1px, 1px);
            //   position: relative;
            //   left: 10px;
            // }
            // span:nth-child(2){
            //   -webkit-transform: rotate(45deg) translate(-1px, -1px);
            //   transform: rotate(45deg) translate(-1px, -1px);
            //   position: relative;
            //   left: 10px;
            // }
          }
          .dot.right {
            right: 10px;
            img {
              left: 15px;
            }
            // span:nth-child(1){
            //   -webkit-transform: rotate(45deg) translate(1px, 1px);
            //   transform: rotate(45deg) translate(1px, 1px);
            //   position: relative;
            //   left: 10px;
            // }
            // span:nth-child(2){
            //   -webkit-transform: rotate(-45deg) translate(1px, -1px);
            //   transform: rotate(-45deg) translate(1px, -1px);
            //   position: relative;
            //   left: 10px;
            // }
          }
        }
      }
    }
  }
}
// .download{
//   width:
// }
</style>
